<template>
  <div class="todoapp">
    <todo-header :arr="$store.state.list"></todo-header>
    <todo-main></todo-main>
    <todo-footer></todo-footer>
  </div>
</template>

<script>
//导入样式
import "./styles/base.css";
import "./styles/index.css";

//导入组件
import TodoHeader from "./components/TodoHeader.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoFooter from "./components/TodoFooter.vue";

export default {
  name: "App",
  //注册组件
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data() {
    return {
      list: this.$store.state.list,
      //定义一个中间值，默认显示为全部
      // getSel: "all",
    };
  },
  methods: {
    // createFn(task) {
    // push到数组里
    // const id =
    //   this.$store.state.list.length === 0
    //     ? 100
    //     : this.$store.state.list[this.$store.state.list.length - 1].id + 1;
    // this.$store.state.list.push({
    //   id: id,
    //   name: task,
    //   isDone: false,
    // });
    //},
    //del(id) {
    // if (window.confirm("确定要删除吗？")) {
    //   // console.log(id);
    //   //根据id获取数组里的索引号
    //   const index = this.$store.state.list.findIndex((obj) => obj.id === id);
    //   console.log(index);
    //   //调用splice()方法删除对应索引号的数据
    //   this.$store.state.list.splice(index, 1);
    // }
    //},
    //typestr(str) {
    // this.getSel = str;
    //},
    // clearFun() {
    // this.$store.state.list = this.$store.state.list.filter(
    //   (obj) => obj.isDone === false
    // );
    // },
  },
  // computed: {
  //   //定义一个新数组，通过$store.state.list来判断筛选符合条件的数据
  //   showArr() {
  //     if (this.getSel === "yes") {
  //       //console.log(this.getSel);
  //       return this.$store.state.list.filter((obj) => obj.isDone === true);
  //     } else if (this.getSel === "no") {
  //       //console.log(this.getSel);
  //       return this.$store.state.list.filter((obj) => obj.isDone === false);
  //     } else {
  //       return this.$store.state.list;
  //     }
  //   },
  // },
  //深度监听，数据缓存
  watch: {
    list: {
      deep: true,
      handler() {
        localStorage.setItem(
          "todolist",
          JSON.stringify(this.$store.state.list)
        );
      },
    },
  },
};
</script>

<style>
</style>
